<template>
  <pre
    :class="['hx-scroll', lineNumbers]"
  ><code :class="'language-'+ type" v-html="Prism.highlight(code, Prism.languages[type], type)"></code></pre>
</template>
<script lang="ts">
export default defineComponent({
  name: 'PreviewCode'
})
</script>
<script setup lang="ts">
import { onMounted, computed, defineComponent } from 'vue'
import Prism from 'prismjs'
import 'prismjs/themes/prism.css'

const props = defineProps({
  code: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'html'
  },
  isShowlineNumbers: {
    type: Boolean,
    default: false
  }
})
const lineNumbers = computed(() => {
  return props.isShowlineNumbers ? 'line-numbers' : ''
})
onMounted(() => {
  Prism.highlightAll() //切换菜单重新渲染
})
</script>

<style lang="scss">
pre[class*='language-'] {
  margin: 0;
  overflow-x: scroll;
}
</style>
